<template>
  <div class="col-full">
    <!--进入各个合集-->
    <compilation-edit v-if="!enterCompilation" :compilation="compilation" @returnCompilation="enterCompilation=!enterCompilation"></compilation-edit>
    <!--视频合集主页-->
    <div v-else>
      <div>
        <div style="display: inline">
          <span style="font-size: 18px;">我的合集和视频列表</span>
          <div class="more-operation" v-show="!this.$store.state.compilationChange" @click="centerDialogVisible = true">
            <span class="iconfont icon-jiahao"></span> 新建
          </div>
        </div>
        <div class="list-change">
          <!--切换排列-->
          <span @click="this.$store.commit('changeCompilation')" :class="{isActive:this.$store.state.compilationChange==true}" class="iconfont icon-s-grid" style="margin-right: 10px"></span>
          <!--默认-->
          <span @click="this.$store.commit('changeCompilation')" :class="{isActive:this.$store.state.compilationChange==false}" class="iconfont icon-liebiao2"></span>
        </div>
      </div>
      <!--视频合集列表 当行分布   v-if   -->
      <div style="margin: 0;padding: 0;" v-if="!this.$store.state.compilationChange">
        <div class="compilation-main" v-for="(item,index) in compilationList" :key="index">
          <div class="my-title-empty">
            <span class="common-cursor" @click="jumpVideoItem(item)">{{item.compilationName}}</span>
            <span class="count">{{item.count}}</span>
            <div class="section-right-options">
              <div class="more-operation common-cursor common-hover-border">
                <span class="iconfont icon-bofang1 more-span-color"></span> 全部播放
              </div>
              <div @click="jumpVideoItem(item)" class="more-operation more-operation-margin common-cursor common-hover-border">
                更多<span class="iconfont icon-icon-xiangyou more-span-color"></span>
              </div>
            </div>
          </div>
          <!--一个合集至多显示前5个视频，不得超过5个-->
          <div style="display: flex;overflow: hidden;">
            <div class="channel-add-video" @click="addVideo(item)">
              <div class="add-covers-meta">
                <span class="iconfont icon-plus-full create-covers-meta-span"></span>
                <span class="create-covers-meta-span">添加视频</span>
              </div>
            </div>
            <!--限制至多 5 个视频 -->
            <initial-video-item :list="item.compilationChild" :otherStyle="false"></initial-video-item>
          </div>
        </div>
      </div>
      <!--视频合集列表 块状分布   v-else  -->
      <compilation-video-item v-else :list="compilationList" :otherStyle="false" @changeEnCo="changeEnCo"
                              @openDialog="centerDialogVisible = true"></compilation-video-item>
      <!--当合集为空时-->
      <div class="video-card-empty" v-show="false">
        <p>你可以将自己上传的视频整理成<span style="color: #00a1d6"> "视频列表"</span></p>
        <p style="margin-bottom: 20px">方便别人查看，快去创建视频列表吧~</p>
        <div class="list-empty"></div>
        <div style="margin: 20px 0 40px 0;">
          <span class="create-video-list">新建视频列表</span>
        </div>
      </div>
    </div>

    <!--添加视频弹出框-->
    <el-dialog v-model="addVideoDialog" title="选择视频" width="500" center :close-on-click-modal="false">
      <div class="pin-layer">
        <input type="text" placeholder="搜索我上传的视频" class="space_input pin-layer-search">
        <span class="iconfont icon-sousuo search-btn"></span>
      </div>
      <div class="pin-layer-order clearfix">
        <p class="pin-layer-order-tip">未添加视频列表</p>
        <el-popover
            placement="bottom"
            popper-class="el-popover-self-three"
            trigger="click">
          <template #reference>
            <span style="font-size: 12px;color: #222;float: right;cursor: pointer">最新发布<i style="font-size: 12px;color: #99a2aa" class="iconfont icon-xiangxia"></i></span>
          </template>
          <ul class="ul-dropdown-item">
            <li class="be-dropdown-item-delimiter">最新发布</li>
            <li class="be-dropdown-item-delimiter">最多播放</li>
          </ul>
        </el-popover>
      </div>


      <template #footer>
        <div class="dialog-footer">
          <el-button  @click="addVideoDialog = false">
            确定
          </el-button>
          <el-button @click="addVideoDialog = false">取消</el-button>
        </div>
      </template>
    </el-dialog>

    <!--新建视频列表弹出框-->
    <el-dialog v-model="centerDialogVisible" title="新建视频列表" width="400" center>
      <el-form :model="compFormList" label-width="100px" label-position="left">
        <el-form-item label="视频列表标题">
          <el-input
              v-model="compFormList.text"
              maxlength="10"
              placeholder="请填写标题"
              show-word-limit
              type="text"
          />
        </el-form-item>
        <el-form-item label="视频列表简介">
          <el-input
              v-model="compFormList.introduction"
              maxlength="256"
              placeholder="请填写视频列表简介(选填)"
              show-word-limit
              :rows="4"
              type="textarea"
          />
        </el-form-item>
        <el-form-item label="关键字">
          <el-input
              v-model="compFormList.text"
              maxlength="10"
              placeholder="请填写关键字(选填)"
              show-word-limit
              type="text"
          />
        </el-form-item>
        <el-form-item>
          <span style="color: #6d757a">标题含关键词的新投稿视频将自动同步到视频列表</span>
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="centerDialogVisible = false">
            下一步
          </el-button>
          <el-button @click="centerDialogVisible = false">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import InitialVideoItem from "@/components/personalHomepageComponent/tabs/initialVideoItem";
import CompilationVideoItem from "@/components/personalHomepageComponent/tabs/compilationVideoItem";
import CompilationEdit from "@/components/personalHomepageComponent/tabs/compilationEdit";
export default {
  /**视频合集列表*/
  name: "compilationsPage",
  components: {CompilationEdit, InitialVideoItem,CompilationVideoItem},
  data(){
    return{
      enterCompilation:true,
      centerDialogVisible:false,
      addVideoDialog:false,
      compFormList:{},
      compilation:{},
      // 合集列表(compilationChild只允许5个)
      compilationList:[
        {id:1,count:2,compilationName:'影视',date:'6-4',
          compilationChild:[
            {title:'剑网3·侠肝义胆沈剑心',views:141,date:'2-4'},
            {title:'鬼灭之刃',views:5121,date:'2-7'}
          ]
        },
        {id:2,count:4,compilationName:'甜妹',date:'5-4',
          compilationChild:[
            {title:'西西酱',views:141,date:'2-4'},
            {title:'东东酱',views:5121,date:'9-7'},
            {title:'阿里酱',views:341,date:'3-4'},
            {title:'康纳酱',views:341,date:'6-4'},
          ]
        },
        {id:3,count:3,compilationName:'海底世界',date:'2-9',
          compilationChild:[
            {title:'派大星',views:141,date:'2-4'},
            {title:'海绵宝宝',views:5121,date:'2-7'},
            {title:'蟹老板',views:341,date:'2-4'},
          ]
        },
      ]
    }
  },
  methods:{
    // 此方法是在合集块状时跳转到合集里面
    changeEnCo(item){
      this.compilation = item
      this.enterCompilation = !this.enterCompilation
    },
    // 跳转到合集里面
    jumpVideoItem(item){
      this.compilation = item
      this.enterCompilation = !this.enterCompilation
    },
    // 添加视频
    addVideo(item){
      this.addVideoDialog = true
    }
  },
}
</script>

<style>
.el-popover.el-popper.el-popover-self-three {
  min-width: 80px !important;
  padding: 5px 0;
  width: 80px !important;
  background-color: #fff;
}
</style>
<style scoped>
.ul-dropdown-item {
  list-style: none;
}

.be-dropdown-item-delimiter {
  padding: 5px;
  text-align: center;
  font-size: 13px;
  color: #222;
  cursor: pointer;
}

.be-dropdown-item-delimiter:hover {
  color: #00a1d6;
  background-color: #e5e9ef;
}
.pin-layer-order {
  margin-top: 20px;
}
.clearfix {
  zoom: 1;
}
.pin-layer-order-tip {
  float: left;
  line-height: 20px;
  font-size: 12px;
  color: #222;
}
.space_input:focus {
  border-color: #00a1d6;
}
.search-btn {
  position: absolute;
  right: 8px;
  top: 3px;
  color: #e3e5e7;
  cursor: pointer;
  font-size: 19px;
}
.search-btn:hover{
  color: #00a1d6;
}
.pin-layer {
  margin-top: 10px;
  position: relative;
}
.pin-layer-search {
  border: 1px solid #d6dce5;
  border-radius: 15px;
  /*box-shadow: none;*/
  width: 450px;
  line-height: 32px;
  padding: 0 40px 0 10px;
}
.isActive {
  color: #00a1d6;
}
.compilation-main{
  position: relative;border-bottom: 1px solid #eee;padding-bottom: 10px
}
.channel-add-video:hover{
  border-color: #00a1d6;
}
.channel-add-video:hover span{
  color: #00a1d6;
}
.channel-add-video {
  position: relative;
  width: 190px;
  height: 119px;
  margin-top: 10px;
  background: #fff;
  border: 2px dashed #b8c0cc;
  border-radius: 4px;
  transition: border .2s ease;
  box-sizing: border-box;
  cursor: pointer;
  display: block;
  margin-right: 20px;
}
.add-covers-meta {
  position: absolute;
  top: 50%;
  width: 100%;
  transform: translateY(-50%);
}

.create-covers-meta-span {
  display: block;
  color: #999999;
  font-size: 16px;
  text-align: center;
}
.more-operation{
  border: 1px solid #b8c0cc;border-radius: 4px;color: #6d757a;font-size: 12px;padding: 3px 10px;display: inline;
}
.more-operation-margin{
  margin-left: 10px;
}
.more-span-color{
  color: #9499a0;font-size: 12px
}
.common-hover-border:hover {
  color: #00a1d6;
  border: 1px solid #00a1d6;
}
.common-hover-border:hover span {
  color: #00a1d6;
}
.section-right-options{
  position: absolute;
  top: -2px;
  right: 0;
  float: right;
}
.my-title-empty{
  position: relative;
  font-size:18px;color:#222;padding-bottom: 15px;height: 66px;line-height: 66px
}
.common-cursor{
  cursor: pointer;
}
.count {
  position: relative;
  background: #f6fafb;
  border: 1px solid #ddd;
  border-radius: 3px;
  color: #777;
  font-size: 12px;
  line-height: 18px;
  height: 18px;
  margin-left: 11px;
  padding: 0 5px;
  vertical-align: middle;
}
.count:before{
  background-image: url(https://images.weserv.nl/?url=https://i0.hdslb.com/bfs/static/jinkela/space/asserts/icons.png);
  position: absolute;
}
.count:before {
  background-position: -215px -340px;
  content: "";
  display: block;
  left: -6px;
  top: -4px;
  height: 20px;
  width: 7px;
}
.col-full {
  background: #fff;
  box-shadow: 0 0 0 1px #eee;
  border-radius: 4px;
  padding: 20px;
}
.more-operation{
  margin-left: 10px;
  cursor: pointer;
  border: 1px solid #b8c0cc;border-radius: 4px;color: #6d757a;font-size: 12px;padding: 3px 10px;display: inline;
}
.more-operation  span{
  font-size: 12px;
}
.list-change{
  position: absolute;
  right: 20px;
  display: inline;
  color: #9499a0;
}
.list-change span{
  cursor: pointer;
}
.list-change span:hover{
  color: #00a1d6;
}
.video-card-empty{
  margin-top: 20px;
  color: #6d757a;
  font-size: 16px;
  text-align: center;
}

.list-empty{
  width: 300px;
  height: 160px;
  margin: auto;
  background-image: url(https://images.weserv.nl/?url=https://i0.hdslb.com/bfs/static/jinkela/space/asserts/empty-channel.png);
}
.create-video-list{
  text-align: center;cursor: pointer;color: #fff;background-color: #00a1d6;
  border-radius: 4px;font-size: 14px;padding: 8px 20px;
}
</style>
